﻿<!DOCTYPE html>
<html>
<head>
    <title>{$platform.name}</title>
    <script src="/static/js/jquery-2.1.1.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <!--引用layui弹框插件-->
    <script src="/static/layui/layui.all.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link href="/static/layui/css/layui.css" rel="stylesheet"/>
    <script src="/static/layui/lay/modules/layer.js"></script>

    <!--弹框js-->
    <script src="/static/js/yii.js"></script>

    {if condition="$swidthStyle eq 0"}
    <link href="/static/css/pattern/public.css" rel="stylesheet"/>
    {else/}
    <link href="/static/css/default/public.css" rel="stylesheet"/>
    {/if}
</head>
<body>
<style>
    html, body{background-color:#FFF!important;}
    .modal-body{background-color:#fff;padding:15px}
    .page-header{margin-top:15px!important;}
    .add_button{border-top:1px solid #eee;padding-top:15px;}
    .config_img {
        height:65px;
        margin-top: 15px;
    }
    .newContetn{line-height:38px;padding-left:10px;width:70%;height:300px;border:1px solid #e6e6e6}
    .show_qrcode{position: fixed;margin: auto;text-align: center;width:100%;background-color:#0c0c0c;height:100%;top:0px;opacity:0.9;display: none}
    .qrcode_content{padding:15px;background-color:#FFF;display: inline-block;border:1px solid #ccc;border-radius:8px;margin-top:12%;opacity:1;}
</style>

<div class="modal-body">
    <fieldset class=" layui-field-title" >
        <legend>添加门票</legend>
    </fieldset>


    <form class="layui-form layui-form-pane form-horizontal layui-col-md12" action="" >

        <div class="layui-form-item layui-col-md9">
            <label class="layui-form-label">门票类型</label>
            <div class="layui-col-md4">
                <select name="showtype" lay-verify="showtype" lay-filter="showtype" class="select"  lay-search="">
                    <option value="">请选门票类型</option>
                    {volist name="tickets_type" id="vo"}
                    <option value="{$key}">{$vo}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-col-md9">
            <label class="layui-form-label">选择门票</label>
            <div class="layui-col-md4">
                <select name="list" lay-verify="list" lay-filter="list" class="select"  lay-search="">
                    <option value="">请选门票</option>
                    {volist name="list" id="vo"}
                    <option value="{$vo.id}">{$vo.title}</option>
                    {/volist}
                </select>
            </div>
        </div>


        <div class="layui-form-item layui-col-md9">
            <label class="layui-form-label">*价格</label>
            <div class="layui-col-md4">
                <input type="number" step="0.01" name="price" placeholder="价格" class="layui-input" disabled >
            </div>

            <label class="layui-form-label layui-col-md-offset1">*有效期(天)</label>
            <div class="layui-col-md4">
                <input type="number" name="validity" placeholder="有效期" class="layui-input" disabled>
            </div>
        </div>

        <div class="layui-form-item layui-col-md9">
            <label class="layui-form-label">入园时间</label>
            <div class="layui-col-md4">
                <input type="text" name="time_range" class="layui-input"  placeholder=" - " disabled>
            </div>

            <label class="layui-form-label layui-col-md-offset1">入园地址</label>
            <div class="layui-col-md4">
                <input type="text" name="address" placeholder="入园地址" class="layui-input" disabled>
            </div>
        </div>


        <div class="layui-form-item layui-col-md9">
            <label class="layui-form-label">检票次数</label>
            <div class="layui-col-md4">
                <input type="number" name="degree" placeholder="检票次数" class="layui-input" disabled>
            </div>

            <label class="layui-form-label  layui-col-md-offset1">库存</label>
            <div class="layui-col-md4">
                <input type="number"  name="inventory" placeholder="库存" class="layui-input" disabled>
            </div>
        </div>

        <!--图文模型&单页模型-->
        <div class="layui-form-item" >
            <label class="layui-form-label">门票说明</label>
            <div class="layui-input-block">
                <div class="newContetn"></div>
            </div>
        </div>

        <div class="layui-form-item layui-col-md9">
            <label class="layui-form-label">*出行日期</label>
            <div class="layui-col-md4">
                <input type="text" name="effective_time" placeholder="出行日期" class="layui-input" id="test" value="{$newtime}"  >
            </div>
            <label class="layui-form-label layui-col-md-offset1">*购买数量</label>
            <div class="layui-col-md4">
                <input type="number" name="count" placeholder="购买数量" class="layui-input" value="1" >
            </div>
        </div>

        <div class="layui-form-item layui-col-md9">
            <label class="layui-form-label">*购票人</label>
            <div class="layui-col-md4">
                <input type="text" name="name" placeholder="购票人" class="layui-input" >
            </div>
            <label class="layui-form-label layui-col-md-offset1">*手机号</label>
            <div class="layui-col-md4">
                <input type="text" name="mobile" placeholder="手机号" class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item layui-col-md9">
            <label class="layui-form-label">*身份证号</label>
            <div class="layui-col-md4">
                <input type="text" name="IDcard" placeholder="身份证号" class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item layui-col-md9">
            <label class="layui-form-label">支付方式</label>
            <div class="layui-col-md4">
                <select name="pay_type" >
                    <option value="">请选择支付方式</option>
                    {volist name="paytype" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <input type="hidden" name="order_id" value="0">

    </form>

</div>
<div class="add_button">
    <div class="layui-form-item">
        <div class="layui-col-md-offset1">
<!--            href="{:URL('tickets/online/index')}"-->
            <a type="button" class="layui-btn layui-btn-primary show_quite"  >取消</a>
            <a class="layui-btn createOrder">生成订单</a>
        </div>
    </div>
</div>

<div class="show_qrcode">
    <div class="qrcode_content">
        <img src="">
    </div>
</div>

<script>
    var createshow = 0;
    function showUnreadNews(orderId)
    {
        if(createshow==1){
            return false;
        }
        $.ajax({
            type: "POST",
            url:"{:URL('tickets/online/showUnreadNews')}",
            dataType: "json",
            data:{id:orderId},
            success: function(data) {
                if(data.code==0){
                    layer.alert(data.msg);
                    $(".show_qrcode").hide();
                    createshow = 1;
                }
            }
        });
    }

    layui.use(['form','laydate','layedit'], function() {
        var form = layui.form
            , layer = layui.layer
            ,layedit = layui.layedit;
        var laydate = layui.laydate;

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');
        //时间范围
        laydate.render({
            elem: '#test' //指定元素
        });

        form.on('select(showtype)', function (data) {
            //触发联动
            var type = data.value;

            //获取票列表
            $.ajax({
                type: 'post',
                url: "{:URL('tickets/online/listsApi')}",
                data: {type: type},
                dataType: 'JSON',
                success: function (res) {
                    var data = res.data;
                    //生成楼栋信息
                    var html = '<option value="">请选门票</option>';
                    $.each(data, function(e,v){
                        html +='<option value="'+v.id+'" >'+v.title+'</option>';
                    });
                    $('select[name="list"]').html(html);
                    form.render('select');
                },
                error: function (res) {
                }
            });
        });

        //获取票种详细信息
        form.on('select(list)', function (data) {
            //触发联动
            var id = data.value;
            $.ajax({
                type: 'post',
                url: "{:URL('tickets/online/detailApi')}",
                data: {id:id},
                dataType: 'JSON',
                success: function (res) {
                    var data = res.data;
                    $("input[name='price']").val(data.price);
                    $("input[name='validity']").val(data.validity);
                    $("input[name='inventory']").val(data.inventory);
                    $("input[name='address']").val(data.address);
                    $("input[name='degree']").val(data.degree);
                    $(".newContetn").html(data.content);
                    $("input[name='time_range']").val(data.time_range);

                    form.render('select');
                },
                error: function (res) {
                }
            });
        });

        $(".show_quite").click(function () {
            $(".show_qrcode").hide();
        });

        $(".createOrder").click(function () {
            var data = $("form").serializeArray();
            $.ajax({
                type:'post',
                url:"{:URL('tickets/online/createOrder')}",
                data:data,
                dataType:'JSON',
                success:function (res) {

                    if(res.code==0){
                        $('input[name="order_id"]').val(res.order_id);
                        //弹出二维码
                        if(res.url1!=0){
                            var order_id = res.order_id;
                            $(".show_qrcode").show();
                            $(".qrcode_content").find("img").attr("src",res.url1);
                            setInterval('showUnreadNews('+order_id+')',1000);//轮询执行，500ms一次
                        }else{
                            layer.alert(res.msg);
                            $('input[name="order_id"]').val(0);
                        }

                        // $.ajax({
                        //     type:'post',
                        //     url:"{:URL('tickets/online/qrcode')}",
                        //     data:{data:dataurl},
                        //     dataType:'JSON',
                        //     success:function (res1) {
                        //         $(".qrcode_content").find("img").attr("src",res1);
                        //     }
                        // })

                    }else{
                        layer.alert(res.msg);
                    }
                },
                error:function (res) {
                }
            });
        });

        layui.form.render('select');
        form.render();
    });



</script>

</body>
</html>